---
title: "MRSE"
output: 
  flexdashboard::flex_dashboard:
    theme: 
      version: 4
      bootswatch: cerulean
    logo: logo.png
    favicon: imagen1.png
    storyboard: true
    social: menu
    vertical_layout: fill
    source: embed
    orientation: columns
editor_options: 
  chunk_output_type: console
---

```{r setup, include=FALSE}
library(flexdashboard)
library(highcharter)
library(tidyverse)
library(plotly)
library(ggthemes)
library(lubridate)
library(vembedr)
library(leaflet)
library(sf)
```

<head>
  <!-- Google tag (gtag.js) -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-8B5C6WFB9Q"></script>
  <script>
  
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'G-8B5C6WFB9Q');
    
  </script>
</head>

Presentación {data-icon="fa-droplet"}
===

Column {data-width=200}
---
<center>
<!-- ![](https://cdn.www.gob.pe/uploads/campaign/photo/000/001/008/Logo-EALV-sin-fondo.png){width="200"} -->
![](mrse_logo.png){width="85%"}

</center>

### <span style="color:darkblue;font-weight:bold;">Bienvenida a esta plataforma de acceso público</span>

***MRSE-H de la EPS Ilo S.A.***

> EPS Ilo S.A. realiza implementación del Plan de Intervención los MRSE en la Comunidad Campesina de Asana con la finalidad de conservación y recuperación de los Servicios Ecosistémicos Hídricos.

***Equipo MRSE***
<br><br>
<center>

```{r}
embed_youtube("FqETSuNF4ks", height = 215, width = NULL,allowfullscreen = TRUE)
```
</center>

Column {.tabset data-width="500" .tabset-fade}
---

### <span style="color:darkblue;font-weight:bold;">NOSOTROS</span>

<div class="contenedor-imagen">
  <img src="fondo2.jpg" alt="Imagen 1">
  <img src="fondo3.jpg" alt="Imagen 2">
  <img src="fondo4.jpg" alt="Imagen 3">
</div>

<!-- Agrega botones para avanzar y retroceder -->
<button id="anterior">Anterior</button>
<button id="siguiente">Siguiente</button>

```{css}
        /* Estilos para el contenedor de la transición */
        .contenedor-imagen {
            width: 100%;
            height: 620px;
            position: relative;
            overflow: hidden;
        }

        /* Estilos para las imágenes */
        .contenedor-imagen img {
            width: 100%;
            height: auto;
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            transition: opacity 1s ease-in-out;
        }

        /* Estilo para mostrar la primera imagen */
        .contenedor-imagen img:first-child {
            opacity: 1;
        }

        /* Estilo para las imágenes anteriores */
        .image-previous {
            opacity: 0.5;
            left: -100%;
        }

        /* Estilos para los botones */
        button {
    margin: 0;
    padding: 10px 20px; /* Aumentamos el padding para un aspecto más moderno */
    font-size: 16px;
    cursor: pointer;
    position: absolute;
    top: 10px;
    background-color: rgba(0, 0, 0, 0.5); /* Fondo con transparencia */
    color: #fff; /* Color de texto blanco */
    border: none;
    border-radius: 5px; /* Bordes redondeados */
    transition: background-color 0.3s, color 0.3s; /* Efecto de transición */
    outline: none; /* Quitamos el borde al hacer clic */
}

button:hover {
    background-color: rgba(0, 0, 0, 0.8); /* Cambio de color al pasar el mouse */
}

        #anterior {
            left: 10px; /* Ajusta la posición horizontal del botón "Anterior" */
        }

        #siguiente {
            right: 10px; /* Ajusta la posición horizontal del botón "Siguiente" */
        }
```


```{js}
var currentImage = 0;
var images = document.querySelectorAll('.contenedor-imagen img');
var anteriorButton = document.getElementById('anterior');
var siguienteButton = document.getElementById('siguiente');

// Función para avanzar a la siguiente imagen
function avanzar() {
  images[currentImage].classList.add('image-previous');
  images[currentImage].style.opacity = 0;
  currentImage = (currentImage + 1) % images.length;
  images[currentImage].style.opacity = 1;
  images[currentImage].classList.remove('image-previous');
}

// Función para retroceder a la imagen anterior
function retroceder() {
  images[currentImage].classList.add('image-previous');
  images[currentImage].style.opacity = 0;
  currentImage = (currentImage - 1 + images.length) % images.length;
  images[currentImage].style.opacity = 1;
  images[currentImage].classList.remove('image-previous');
}

// Manejadores de clic para los botones
anteriorButton.addEventListener('click', retroceder);
siguienteButton.addEventListener('click', avanzar);

// Cambia la imagen automáticamente cada 6 segundos
setInterval(avanzar, 6000);
```


Precipitación {data-icon="fa-chart-simple"}
===

## Column {data-width="600"}



```{r}
# Carga de la base de datos:
df <- read.csv("data_marzo")

df$date <- as.POSIXct(
  paste(df$date, df$hora, sep = " "),
  format = "%Y-%m-%d %H:%M")

df$hora <- NULL

# Últimos datos descargados:
descargado <- read.csv("n4.csv", skip = 1)[-1]
names(descargado) <- c("date", "pp")
descargado$date <- as.POSIXct(
  descargado$date, format = "%y/%m/%d %H:%M")

# Unión de datasets
df2 <- rbind(df, descargado)
```

<!-- Conversión a data diaria: -->

```{r}
df3 <- df2 %>% 
  mutate(date0 = as.Date(date, format = "%Y-%m-%d"),
         date1 = format(date, format = "%Y-%m"),
         date2 = format(date, format = "%d")) %>% 
  reframe(pp = sum(pp, na.rm = T), .by = c(date1,date2))
```

### <span style="color:darkblue;font-weight:bold;">DATOS CRUDOS (DESCARGA)</span>

```{r}
data <- df2
names(data) <- c("fecha", "Precipitacion")
data$fecha <- as.numeric(data$fecha)*1000-(5*3600*1000)

highchart(type = "stock") %>%
  hc_title(text = "Estación Asana (Datos crudos)") %>%
  hc_xAxis(type = "datetime") %>%
  hc_add_series(data = data, type = "column",
                hcaes(x = fecha, y = Precipitacion),
                name = "Precipitacion", color = "#3182BD") %>%
  hc_exporting(
    enabled = TRUE,
    buttons = list(
      contextButton = list(
        menuItems = c("downloadPNG",
                      "downloadPDF",
                      "separator",
                      "downloadCSV",
                      "downloadXLS",
                      "separator",
                      "resetZoom")
      )
    )
  ) %>% 
  hc_xAxis(type = "datetime", showLastLabel = TRUE,
           dateTimeLabelFormats = list(month = "%B")) %>% 
  hc_tooltip(shared = TRUE, useHTML = TRUE) %>% 
  hc_chart(zoomType = "x")
```

### <span style="color:darkblue;font-weight:bold;">MESES COLECTADOS</span>

```{r}
cantidad <- sum(length(unique(df3$date1)))
gauge(paste0(cantidad, "meses"), min = 0, max = 12, gaugeSectors(
  danger = c(0, 2), warning = c(3, 5), success = c(6, 10)
))
```

## Column {data-width="600"}

### <span style="color:darkblue;font-weight:bold;">GRÁFICO DE BARRAS</span>

```{r}
df4 <- df3
names(df4) <- c("fecha1","fecha3", "Precipitacion")
m2 <- df4 %>% ggplot(aes(x=factor(fecha3),y=Precipitacion))+
  geom_bar(stat="identity",fill="turquoise", position = )+
  labs(x="Fecha",y="Precipitación (mm)") + 
  theme_minimal() + theme(plot.title = element_text(size = 14,
    face = "bold", hjust = 0.5),
    plot.subtitle = element_text(size = 12,
    face = "italic", hjust = 0.5),
    legend.position = "none",
    strip.text.x = element_text(colour = "white",face = "bold",
                                family = "helvetica"),
    strip.background = element_rect(
     color="#3182BD", fill="#3182BD",
     size=1.5, linetype="solid"),
    axis.title = element_text(size = 5),
    axis.text.x = element_text(size = 5,
        angle = 90)) +
  facet_wrap(~fecha1,ncol=2)
ggplotly(p=m2)
```

## Column {data-width="200"}

### Precipitación acumulada
```{r}
valueBox(paste0(sum(df2$pp, na.rm=T)," milímetros"), icon = "fa-droplet")
```

### Inicio de registro

```{r}
valueBox(min(df2$date, na.rm=T), icon = "fa-pencil")
```

### Último registro

```{r}
valueBox(max(df2$date, na.rm=T), icon = "fa-pencil")
```

### <a href="https://felt.com/map/MRSE-H-YL2D8IAiQoucf0SETYCFBC?loc=-17.04095,-70.48828,12.2z" style="color: darkblue; font-weight: bold; text-decoration: none;">MAPA WEB (Clic aquí para ser dirigido a un mapa más detallado)</a>


```{r}
library(leaflet)
leaflet() %>% 
  addTiles() %>%
  addMarkers(lat=-17.062286,lng=-70.520806,
             popup = paste(sep="<br>","<b>Lugar:</b>","Estación pluviométrica","<b>Latitud:</b>","-17.062286","<b>Longitud:</b>"
                           ,"-70.520806")) %>% 
  addCircleMarkers(lat=c(-17.062286,-17.630402),
                   lng=c(-70.520806,-71.335089), radius = 40,
                   color="deepskyblue") %>% 
  addMarkers(lat=-17.630402,lng=-71.335089,
             popup = paste(sep="<br>","<b>Lugar:</b>","EPS ILO S.A.","<b>Latitud:</b>","-17.630402","<b>Longitud:</b>",
                           "-71.19908"))
```

Noticias {.storyboard data-icon="fa-newspaper"}
===
  
### EL INICIO DE LA IMPLEMENTACIÓN

![](TIME_LINE/F1.png)

### SUPERVISIÓN DE ZANJAS DE INFILTRACIÓN

![](TIME_LINE/F1.1.png)

### VERIFICACIÓN DE INSTALACIÓN DE PLUVIÓMETRO

![](TIME_LINE/F2.png)

### PARTICIPACIÓN EN PLATAFORMA DE BUENA GOBERNANZA

![](TIME_LINE/F3.png)

### APROBACIÓN DEL ACUERDO MERESE ANTE EL MINAM

![](TIME_LINE/F4.png)